<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :leftIcon="true" :rightIcon="'kefu'" @clickRight="clickRight">
			<template #title>
				<text>{{t('faq.cjwt')}}</text>
			</template>
		</navbar>
		<view class="details">
			<!-- 加载状态 -->
			<view class="loading-state" v-if="loading">
				<text style="color: #999; text-align: center;">加载中...</text>
			</view>
			
			<!-- 错误状态 -->
			<view class="error-state" v-else-if="error">
				<text style="color: #ff4757; text-align: center;">{{ error }}</text>
				<view class="retry-btn" @click="getArticleDetail">
					<text style="color: #0278DC; text-align: center;">重试</text>
				</view>
			</view>
			
			<!-- 文章内容 -->
			<view v-else>
				<view class="title">{{ articleDetail.title || articleDetail.name || t('faq.wkysy') }}</view>
				
				<!-- 文章缩略图 -->
				<view v-if="articleDetail.cover && !coverError" class="cover-container">
					<image 
						:src="articleDetail.cover" 
						mode="aspectFill"
						@load="onCoverLoad"
						@error="onCoverError"
						class="cover-image"
					/>
				</view>
				<!-- 缩略图加载失败时的占位符 -->
				<view v-else-if="articleDetail.cover && coverError" class="cover-placeholder">
					<text class="placeholder-text">图片加载失败</text>
				</view>
				
				<view class="text">
					<!-- 如果有富文本内容，使用rich-text渲染 -->
					<rich-text 
						v-if="articleDetail.content" 
						:nodes="processRichTextNodes(articleDetail.content)"
						class="rich-text-content"
					></rich-text>
					<!-- 如果没有富文本内容，显示普通文本 -->
					<text v-else-if="articleDetail.text">{{ articleDetail.text }}</text>
					<!-- 如果都没有，显示默认提示 -->
					<text v-else style="color: #999;">暂无内容</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { useI18n } from 'vue-i18n';
	import { faqApi } from '@/utils/api.js';
	
	const { t, locale } = useI18n();
	
	// 响应式数据
	const articleDetail = ref({}); // 文章详情
	const loading = ref(false); // 加载状态
	const error = ref(''); // 错误信息
	const articleId = ref(''); // 文章ID
	const coverLoading = ref(false); // 缩略图加载状态
	const coverError = ref(false); // 缩略图加载错误状态
	
	// 处理富文本节点，为图片添加样式
	const processRichTextNodes = (content) => {
		if (typeof content === 'string') {
			// 如果是字符串，尝试解析为HTML
			try {
				// 简单的HTML字符串处理，为img标签添加样式
				return content.replace(/<img([^>]*)>/g, '<img$1 style="max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: 8rpx;">');
			} catch (e) {
				return content;
			}
		} else if (Array.isArray(content)) {
			// 如果是节点数组，递归处理每个节点
			return content.map(node => processRichTextNode(node));
		}
		return content;
	};
	
	// 递归处理单个富文本节点
	const processRichTextNode = (node) => {
		if (!node || typeof node !== 'object') {
			return node;
		}
		
		// 如果是图片节点，添加样式
		if (node.name === 'img') {
			return {
				...node,
				attrs: {
					...node.attrs,
					style: 'max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: 8rpx; object-fit: contain;'
				}
			};
		}
		
		// 如果有子节点，递归处理
		if (node.children && Array.isArray(node.children)) {
			return {
				...node,
				children: node.children.map(child => processRichTextNode(child))
			};
		}
		
		return node;
	};

	// 获取文章详情
	const getArticleDetail = async () => {
		if (!articleId.value) {
			error.value = '文章ID不能为空';
			return;
		}
		
		try {
			loading.value = true;
			error.value = '';
			
			const result = await faqApi.getArticleDetail(articleId.value);
			
			if (result.code === 200 || result.code === 0) {
				articleDetail.value = result.data || {};
			} else {
				error.value = result.msg || '获取文章详情失败';
				console.error('获取文章详情失败:', result.msg);
				uni.showToast({
					title: result.msg || '获取文章详情失败',
					icon: 'none'
				});
			}
		} catch (err) {
			error.value = '网络错误，请稍后重试';
			console.error('获取文章详情失败:', err);
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};
	
	// uniapp页面加载时获取参数
	onLoad((options) => {
		if (options.id) {
			articleId.value = options.id;
			// 不在这里调用getArticleDetail，等onMounted时调用
		} else {
			error.value = '文章ID不能为空';
			console.error('onLoad: 无法获取文章ID');
		}
	});
	
	// 页面挂载后获取文章详情
	onMounted(() => {
		if (articleId.value) {
			getArticleDetail();
		} else {
			// 如果onLoad没有获取到参数，尝试其他方式
			try {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const id = currentPage.options?.id;
				if (id) {
					articleId.value = id;
					getArticleDetail();
				} else {
					error.value = '文章ID不能为空';
					console.error('onMounted: 无法获取文章ID');
				}
			} catch (e) {
				error.value = '文章ID不能为空';
				console.error('onMounted: 获取文章ID失败:', e);
			}
		}
	});
	
	// 缩略图加载成功
	const onCoverLoad = () => {
		coverLoading.value = false;
		coverError.value = false;
	};
	
	// 缩略图加载失败
	const onCoverError = () => {
		coverLoading.value = false;
		coverError.value = true;
		console.warn('文章缩略图加载失败:', articleDetail.value.cover);
	};
	
	// navbar右侧图标点击事件
	const clickRight = () => {
		uni.navigateTo({
			url: "/pages/service/service"
		});
	};
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		padding: 20rpx 41.81rpx;
		box-sizing: border-box;
	}
	.details{
		position: fixed;
		top: 149.16rpx;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 27.91rpx 27.91rpx 0rpx 0rpx;
		background: #FFFFFF;
		padding: 66.27rpx 38.37rpx;
		overflow-y: auto;
		
		.loading-state, .error-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 200rpx;
			
			.retry-btn {
				margin-top: 20rpx;
				padding: 10rpx 20rpx;
				border: 1rpx solid #0278DC;
				border-radius: 10rpx;
				cursor: pointer;
			}
		}
		
		.title{
			color: #333333;
			text-align: center;
			font-size: 31.4rpx;
			font-weight: 500;
			margin-bottom: 30rpx;
		}
		
		.cover-image {
			width: 100%;
			height: 400rpx;
			border-radius: 16rpx;
			object-fit: cover;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
			
			&:hover {
				transform: translateY(-2rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
			}
		}
		
		.cover-placeholder {
			width: 100%;
			height: 400rpx;
			border-radius: 16rpx;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			border: 2rpx dashed #ddd;
			
			.placeholder-text {
				color: #999;
				font-size: 24rpx;
			}
		}
		.text{
			color: #000000;
			font-size: 27.91rpx;
			font-weight: 300;
			line-height: 1.6;
		}
		
		.rich-text-content {
			width: 100%;
			
			/* 富文本中的图片样式 */
			:deep(img) {
				max-width: 100% !important;
				height: auto !important;
				display: block !important;
				margin: 20rpx 0 !important;
				border-radius: 8rpx !important;
				object-fit: contain !important;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			}
			
			/* 富文本中的段落样式 */
			:deep(p) {
				margin: 16rpx 0;
				line-height: 1.6;
			}
			
			/* 富文本中的标题样式 */
			:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
				margin: 24rpx 0 16rpx 0;
				font-weight: 600;
				line-height: 1.4;
			}
			
			/* 富文本中的列表样式 */
			:deep(ul), :deep(ol) {
				margin: 16rpx 0;
				padding-left: 32rpx;
			}
			
			:deep(li) {
				margin: 8rpx 0;
				line-height: 1.6;
			}
		}
	}
</style>